<template>
	<div>
		<div class="my-body">
			<div class="ipt_a">
				<div style="float: left; line-height: 30px; "  class="tab_font-size">积分状态：</div>
				<el-select v-model="form.region" placeholder="请选择有效授权编号">
					<el-option label="全部" value="shanghai"></el-option>
					<el-option label="发放中" value="beijing"></el-option>
					<el-option label="发放完成" value="beijing"></el-option>
				</el-select>
			</div>
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;"  class="tab_font-size">积分隶属年底：</div>

				<el-select v-model="valuesj" placeholder="请选择" disabled  style="width:170px;">
				<el-option label="2024"></el-option>
				</el-select>
			</div>
			
			<div>
				<el-button type="primary" plain>查询</el-button>
				<el-button plain>清空</el-button>

			</div>


			<div>
				<div style="float: left; width: 100%;">
					<el-button type="primary"  @click="dialogVisible = true" plain>申领</el-button>
					<el-button plain>删除</el-button>

				</div>
				<el-dialog title="添加积分申请" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
                        <div style="width: 100%; height: 710px;">
							<el-form ref="form" :model="form" label-width="80px">
								<el-form-item label="积分申请编号" style="float: left;">
							
									<el-input v-model="form.name" style="width: 200px;"></el-input>
								    <el-button type="primary">刷新</el-button>
								</el-form-item>
								
								
							
								<el-form-item label="积分申请类型" style="float: left; width: 500px ;" >
									<el-col :span="11">
										<el-select v-model="form.region" placeholder="">
											<el-option label="年度积分" value="shanghai"></el-option>
											
										</el-select>
									</el-col>
							
			
							
								</el-form-item>
								
								
							</el-form>
							<div style="width: 100%; float: left;">
								
								<div style="width: 40%; float: left;">
									<div>商采指标</div>
									<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
										style="width: 100%">
										<el-table-column type="selection" width="55">
										</el-table-column>
										<el-table-column prop="bianhao" label="医院和地区名称" width="150">
										</el-table-column>
										<el-table-column prop="senddate" label="授权编号" width="120">
										</el-table-column>
										<el-table-column prop="enddate" label="商采指标" width="120">
										</el-table-column>
										
									
									</el-table>
									
									
								</div>
								<div style="width: 48%; float: left; margin-left: 2%;">
									<div>年度订货统计</div>
									<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
										style="width: 100%">
										<el-table-column type="selection" width="55">
										</el-table-column>
										<el-table-column  prop="bianhao" label="订货编号" width="150">
										</el-table-column>
										<el-table-column prop="senddate" label="订单来源" width="120">
										</el-table-column>
										<el-table-column prop="enddate" label="订单类型" width="120">
										</el-table-column>
										<el-table-column prop="name" label="产品规格" width="120">
										</el-table-column>
										<el-table-column prop="province" label="订单状态" width="120">
										</el-table-column>
										<el-table-column prop="address" label="使用积分" width="200">
										</el-table-column>
									    <el-table-column prop="address" label="发货数量" width="200">
									    </el-table-column>
										<el-table-column prop="address" label="单价" width="200">
										</el-table-column>
									
									</el-table>
									
									
								</div>
								
								
							</div>
							<div style="width: 100%; height: 50px; float: left; margin-top: 20px; font-size: 20px;">
								<span>申请积分：</span>
								<input style="width: 100px; height: 50px; margin-left: 5px;" placeholder="0"/>
								<span>=数量</span>
								<input style="width: 100px; height: 50px; margin-left: 5px;" placeholder="0.00"/>
								<span>X</span>
								<input style="width: 100px; height: 50px; margin-left: 5px;" placeholder="25489498"/>
								<span>总金额</span>
								
							</div>
							<div style="width: 100%; height: 50px; float: left; margin-top: 20px; font-size: 20px;">
								<span>归属年度：</span>
								<input style="width: 100px; height: 30px; margin-left: 5px;" placeholder="2024"/>
								
							</div>
							<div style="float: left; width: 100%;">
								<div>备注</div>
								
								<el-input type="textarea"  style="float: left; margin-top: 10px;"></el-input>
							</div>
							
							<div style="float: left; margin-top: 30px;">
									<el-button type="primary">保存</el-button>
									  <el-button type="warning"> 	返回</el-button>
							</div>
							
						
						</div>
						
				</el-dialog>
				<div style="margin-top: 30px; width: 100%; float: left;">
					<template>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
							style="width: 100%" border  fit :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
							<el-table-column type="selection" >
							</el-table-column>
							<el-table-column fixed prop="bianhao" label="申领编号" >
							</el-table-column>
							
							<el-table-column prop="enddate" label="申请日期" >
							</el-table-column>
							<el-table-column prop="name" label="申领类型" >
							</el-table-column>
							<el-table-column prop="senddate" label="积分状态" >
							</el-table-column>
							<el-table-column prop="enddate" label="申请积分" >
							</el-table-column>
							<el-table-column prop="name" label="积分隶属年度" >
							</el-table-column>
							<el-table-column prop="shouqfang" label="凭证" >
							</el-table-column>
							<el-table-column prop="jingxiaos" label="备注" >
							</el-table-column>


						</el-table>
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
							:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
					</template>
				</div>
                <div style="float: left; margin-top: 20px;">
					年度【】 申请积分：【0】
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {

		data() {
			return {
				key: 1, // 为了能每次切换权限的时候重新初始化指令
				valuesj:2024,
				options: [{
					value: '1',
					label: '全部'
				}, {
					value: '2',
					label: '已签收'
				}, {
					value: '3',
					label: '未签收'
				}],
				data: [{
					label: '中国大陆',
					children: [{
							label: '上海',
						}, {
							label: '北京',
						},
						{
							label: '四川',
						}
					]
				}],
				value1: '',
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				value: '',
				chanpingguige: false,
				dialogVisible: false,
				dialogVisiblea: false,
				hospital: false,
				area: false,
				currentPage: 1,
				pageSize: 5,
				jinxiaoshang: false,
				shouhuor: false,
				diquxuanzhe: false,
				tableData: [{
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}],
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: '',
					regioB:'',
					regioA:''
				},
				sizeForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}

			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			handleClose(done) {
				done();
				// this.$confirm('确认关闭？')
				// 	.then(_ => {
				// 		done();
				// 	})
				// 	.catch(_ => {});
			},

			handleClick(row) {
				console.log(row);
			},
			handleSizeChange(val) {
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ipt_a {
		width: 300px;
		height: 50px;
		float: left;
	}

	.ipt_b {
		width: 450px;
		height: 50px;
		float: left;
	}

	.listdizhi {
		width: 100%;
		height: 100px;
		float: left;
		border-bottom: 1px solid;
	}

	.lie {
		width: 90%;
		height: 100%;
		float: left;

	}

	.listdizhia {
		width: 100%;
		height: 50px;
		float: left;
	}

	.listdizhia div {
		float: left;
		margin-left: 30px;
	}

.el-table{
		height: calc(100vh - 302px);
}
</style>